import { modifyAlgor } from "@/apis/algor"
import {
  Space, Button, Drawer, Input, Form, Row, Col, message
} from "antd"


const DrawerForm = ({ visible, onClose, initialValues, getAlgorList }) => {
  // const [open, setOpen] = useState(true)
  // const showDrawer = () => {
  //   setOpen(true)
  // }
  // const onClose = () => {
  //   setOpen(false)
  // }
  const [form] = Form.useForm()

  // 点击确定按钮提交表单
  const onFinish = async (values) => {
    const data = {
      "id": initialValues.id,
      ...values
    }
    await modifyAlgor(data)
    await getAlgorList()
    message.success('修改算法信息成功', 2.5)
    // 提交表单逻辑
    onClose() // 关闭抽屉
  }

  // 点击取消按钮关闭抽屉
  // const onCancel = () => {
  //   form.resetFields() // 重置表单
  //   onClose() // 关闭抽屉
  // }

  return (
    <Drawer
      title="修改算法信息"
      width={720}
      onClose={onClose}
      // visible={visible}
      open={visible}
      styles={{
        body: {
          paddingBottom: 80,
        },
      }}
    >
      <Form
        layout="vertical"
        form={form}
        initialValues={initialValues}
        onFinish={onFinish}
        validateTrigger="onBlur"
      >
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="name"
              label="算法名"
              rules={[
                {
                  required: true,
                  message: '请输入算法名',
                },
              ]}
            >
              <Input placeholder="请输入算法名" maxLength={20} autoComplete="off" />
            </Form.Item>
          </Col>
          <Col span={12}>
            <Form.Item
              name="url"
              label="算法链接"
              rules={[
                {
                  required: true,
                  message: '请输入算法链接',
                },
              ]}
            >
              <Input
                style={{
                  width: '100%',
                }}
                addonBefore="http://"
                placeholder="请输入算法链接"
                maxLength={100}
                autoComplete="off"
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="tag"
              label="算法标签"
              rules={[
                {
                  required: true,
                  message: '标签请用"-"隔开',
                },
              ]}
            >
              <Input placeholder="标签请用 - 分隔,如a-b" maxLength={100} autoComplete="off" />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <Form.Item
              name="title"
              label="算法标题"
              rules={[
                {
                  required: true,
                  message: '请输入算法描述的标题',
                },
              ]}
            >
              <Input placeholder="请输入算法描述的标题" maxLength={20} autoComplete="off" />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={24}>
            <Form.Item
              name="description"
              label="Description"
              rules={[
                {
                  required: true,
                  message: '请输入算法的描述内容',
                },
              ]}
            >
              <Input.TextArea rows={4} placeholder="请输入算法的描述内容" maxLength={300} autoComplete="off" />
            </Form.Item>
          </Col>
        </Row>
        <Form.Item>
          <Row justify="center">
            <Space>
              <Col>
                <Button type="primary" htmlType="submit">
                  提交
                </Button>
              </Col>
              <Col>
                <Button htmlType="button" onClick={onClose}>
                  取消
                </Button>
              </Col>
            </Space>
          </Row>
        </Form.Item>
      </Form>
    </Drawer>
  )
}

export default DrawerForm